<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-28 17:22:07
 * @Description: 
-->
<template>
    <div class="window">
        <slot></slot>
        <div ref="parallax">
            <div class="window-symbol" :style="{ backgroundColor: bgColor }" ref="symbolDiv">
                <svg class="window-symbol-path" viewBox="0 0 2372 1557" fill="none" stroke="black"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M0 1555.57C318.24 1555.57 770.983 1028.98 984.082 560.515C1107.17 290.026 1137.42 1 986.306 1C849.282 1 632.476 249.69 513.543 547.02C329.362 1007.33 333.069 1555.57 641.521 1555.57C959.761 1555.57 1412.36 1028.98 1625.45 560.515C1748.54 290.026 1778.79 1 1627.68 1C1490.66 1 1273.85 249.69 1154.92 547.02C970.735 1007.33 974.591 1555.57 1282.89 1555.57C1601.13 1555.57 2053.73 1028.98 2266.83 560.515C2389.91 290.026 2420.16 1 2269.05 1C2132.03 1 1915.22 249.69 1796.29 547.02C1612.11 1007.33 1615.82 1555.57 1924.27 1555.57C2047.5 1555.57 2184.82 1481.13 2338.31 1347.66"
                        stroke-miterlimit="0"></path>
                </svg>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    bgColor: {
        type: String,
        default: '#736b54'
    }
});
const parallax = ref(null);
const symbolDiv = ref(null);
onMounted(() => {
    var e = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: "onEnter",
            duration: "200%"
        }
    });
    new ScrollMagic.Scene({
        triggerElement: parallax.value
    }).setTween(symbolDiv.value, {
        y: "100%",
        ease: Linear.easeNone
    }).addTo(e);
})
</script>

<style lang="scss" scoped>
.window {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    left: 0px;
    width: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: auto;

    &.pd10 {
        padding-left: 10vh;
        padding-right: 10vh;
        padding-top: 10vh;
        padding-bottom: 10vh;
    }

}

.window-symbol {
    position: absolute;
    overflow: hidden;
    width: 150%;
    height: 150vh;
    z-index: -100;
    top: -75vh;
    left: -25%
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .window-symbol {
        width: 200%;
        top: -50vh;
        left: -75%;
        height: 100vh
    }
}

@media screen and (max-width: 767px) {
    .window-symbol {
        width: 300%;
        top: -50vh;
        left: -75%;
        height: 100vh
    }
}

.window-symbol-path {
    stroke: white;
    animation-name: fadeIn;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0
}
</style>
